<script setup>
import {ref, onMounted, nextTick, computed} from 'vue'
import ImgView from './imgview.vue';
import Progress from './progress.vue';
import CAudio from './audio.vue';
import VideoView from './videoview.vue'
import { useContextMenu } from './useContextMenu';
import refrence from './refrence.vue'


const emit = defineEmits(['scrollBottom', 'withdraw', 'refrence'])
const props = defineProps({
    msg: Object,
    id: String,
})
const isComplete = ref(!!props.msg.isEnd)
const {show} = useContextMenu()

onMounted(() => {
    nextTick(() => {
        emit('scrollBottom')
    })
})
function complete() {
    setTimeout(() => {
        isComplete.value = true
        delete props.msg.progress
    }, 500)
}
const list = [
        {
            name: '引用',
            fn() {
                emit('refrence', props.msg)
            }
        }, {
            name: '撤回',
            fn() {
                emit('withdraw', props.msg.msgId)
            }
        }
    ]
function menu(e) {
    let menu = list.slice()
    if(Date.now() - props.msg.createTime > 60000 || props.id !== props.msg.id) menu.pop()
    show(e, menu)
}
</script>

<template>
    <div class="c-webrtc-chat-message-txt" @contextmenu.prevent="menu">
        <div v-if="msg.type==='image'" class="c-webrtc-msg-image">
            <ImgView :src="msg.url" @complete="emit('scrollBottom')"/>
            <Progress v-if="!isComplete&&msg.progress" :count="msg.progress.index" :total="msg.progress.total" @complete="complete"></Progress>
        </div>
        <div v-else-if="msg.type==='video'" class="c-webrtc-msg-video">
            <VideoView :url="msg.url" @complete="emit('scrollBottom')"/>
            <Progress v-if="!isComplete&&msg.progress" :count="msg.progress.index" :total="msg.progress.total" @complete="complete"></Progress>
        </div>
        <div v-else-if="msg.type==='voice'" class="c-webrtc-msg-text voice">
            <CAudio :url="msg.url" :time="msg.time" :size="true"></CAudio>
        </div>
        <div v-else-if="msg.type==='other'" class="c-webrtc-msg-text">
            <a :href="msg.url" :download="msg.fileName" target="_blank">{{ msg.fileName }}</a>
        </div>
        <div v-else-if="msg.type==='text'" class="c-webrtc-msg-text">{{ msg.text }}</div>
        <refrence v-if="msg.refrence" :msg="msg.refrence"></refrence>
    </div>
</template>